<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Open Flash Charts-2 with uxChartPack 2.1</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all-debug.js"></script>
    <script type="text/javascript" src="../debug.js"></script>
    <script type="text/javascript" src="../media2/uxvismode.js"></script>
    <script type="text/javascript" src="../media2/uxmedia.js"></script>
    <script type="text/javascript" src="../media2/uxflash.js"></script>
    <script type="text/javascript" src="uxchart.js"></script>
    <script type="text/javascript" src="uxofc.js"></script>


    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />

<script type="text/javascript">


    Ext.lib.Ajax.forceActiveX = true;
    Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

  var view;
  Ext.onReady(function(){

     Ext.QuickTips.init();
     Ext.QuickTips.getQuickTip().interceptTitles = true;

     Ext.QuickTips.enable();


    var getTools = function(){
       return [
           //chart reload support
           {id:'refresh',
            handler:function(e,t,p){
                p.chartData? p.setChartData(p.chartData): p.refreshMedia();
              },
             qtip: {text:'Refresh the Chart'}  },

            //save as image support
            {id:'save',
             handler:function(e,t,p){
                p.saveAsImage('ofc_upload_image.php?name=chart.png' );
              },
            qtip: {title:'Save Chart as Image',text:'This example requires a PHP-Server, and depending on your OFC <b>beta</b> release, may not work at all!'}
           } /*,

           {id:'save',
                handler:function(e,t,p){

                   if(Ext.isIE){
                       //Ext.Msg.show({title:'Sorry', msg: 'IE Does not Support Data URLs', buttons:Ext.Msg.OK});
                       //return false;
                   }
                   p.viewImage( "data:image/png;base64," + p.getBinaryImage() , 'PNG Data Url');
                   console.log(p.getBinaryImage());
                 },
               qtip: {title:'Retrieve PNG Image',text:'This example display a base64 encode string of a PNG image of the current chart.'}
           }*/
        ];
   };


    var saved_image_url = 'tmp-upload-images/chart.png';


    view = new Ext.ux.Chart.OFC.Window({
           x : 100,
           y : 100,
            height   : 300,
            width   : 350,
            title       : 'Open Flash Chart Window',
            collapsible : true,
            tools       : getTools(),

            chartCfg   :
               { id       : 'chart2',
                 autoSize : true,
                 renderOnResize : false,
                 disableCaching  : true


               }
                //,mediaMask : {msg:'Loading OpenChart Object'}
                ,loadMask  : {msg:'Gathering Chart Data'}
                ,autoMask  : true
                ,listeners :{

                    chartload: function(chart, obj){
                        //console.info('chartLoaded');
                        var ver = chart.getChartVersion();
                        chart.setTitle(chart.title.split(":")[0] + (': v' + (ver || 2)) );

                    },

                    // Notification that the image save to server is complete
                    imagesaved : function(comp, SWF){
                        this.viewImage( this.prepareURL(saved_image_url,true) , saved_image_url);

                    },

                    destroy : function(){  //close any linked image previews
                      Ext.destroy.apply(Ext, this.previews || [] );
                    }


                }
                ,id         :'demoOFC'
                ,chartURL   : 'OFC/open-flash-chart.swf'

                /* Chart data loading options */

                //,chartData  : data  //initial load - pre-defined JSON series

                //,dataURL  : 'data-files/OFC/data-3.txt'  // SWF-Managed remote request in JSON format
                ,dataFn     : 'view.getMyData'         // named function returning initial JSON string
               //,autoLoad   :{ url:'data-files/OFC/data-3.txt',nocache : true }  // let Ext.ux.Chart.OFC autoLoad do the same.
                //,autoLoad   : 'data-files/OFC/area-point-objects.txt'

                ,getMyData     : function(){
                    return Ext.encode(
                        { "title":{ "text":"Many data lines", "style":"{font-size: 30px;}" }, "elements":[ { "type": "line", "colour": "#9933CC", "text": "Page views", "width": 2, "font-size": 10, "dot-size": 6, "values" : [15,18,19,14,17,18,15,18,17] }, { "type": "line_dot", "colour": "#CC3399", "width": 2, "text": "Downloads", "font-size": 10, "dot-size": 5, "values" : [10,12,14,9,12,13,10,13,12] }, { "type": "line_hollow", "colour": "#80a033", "width": 8, "text": "Bounces", "font-size": 10, "dot-size": 8, "values" : [5,7,9,7,4,6,1,2,5] } ], "y_axis":{ "max": 20 }, "x_axis":{ "steps": 2, "labels": ["January","February","March","April","May","June","July","August","September"] } }
                    );
                }
                ,previews  :  new Array()

                ,viewImage  : function( url, title ){

                    //publish image to a new Window

                    var prev =  new Ext.Window({
                         title: 'Saved Image: '+title,
                         autoHeight : true,
                         autoWidth : !Ext.isIE,

                         //for IE, set width same as chart window
                         width  : Ext.isIE ? this.getSize(true).width : 'auto' ,
                         constrain : true,
                         bodyCfg : {tag:'img',
                                 cls:'x-window-body',
                                 src: url,
                                 style:{width: 'auto', height: 'auto'}
                              }

                        });
                     this.previews.push(prev);
                     prev.show(this.getEl().child('.x-tool-save'));

                }


        });

  view.show();

  Ext.EventManager.on(window,   "beforeunload",  function(){

       Ext.destroy( view, Ext.QuickTips.getQuickTip() );
       } ,window ,{single:true});

});
</script>
<!--- style type="text/css"> .x-window-header{position:relative;} </style -->
</head>
<body>
<div id="about">
For more on Open Flash Charts 2, visit <a href="http://teethgrinder.co.uk/open-flash-chart-2/index.php" target="_blank">teethgrinder.co.uk: Open Flash Chart 2</a>
</div>
</body>
</html>
